<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import utcPlugin from 'dayjs/plugin/utc';
import timezonePlugin from 'dayjs/plugin/timezone';
import { getReservationList } from '@/service/api/reservation';

dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);

defineOptions({
  name: 'ProjectNews'
});

interface NewsItem {
  content: string;
  // time: string;
}

interface Reservation {
  floor: number;
  roomName: string;
  row: number;
  column: number;
  date: string;
  time: string;
  createAt: Date;
  updateAt: Date;
}

const reservations = ref<Reservation[]>([]);

const newses = computed<NewsItem[]>(() =>
  reservations.value.map(reservation => ({
    content: `您预约了 ${reservation.date}${reservation.time}${reservation.floor}楼${reservation.roomName}第${reservation.row}排第${reservation.column}列的座位`,
    time: dayjs(reservation.createAt).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss')
  }))
);

onMounted(async () => {
  const response = await getReservationList();
  reservations.value = response.data;
});
</script>

<template>
  <ACard title="我的预约" :bordered="false" size="small" class="card-wrapper">
    <template #extra>
      <a class="text-primary" href="javascript:;">更多信息</a>
    </template>
    <AList :data-source="newses">
      <template #renderItem="{ item }">
        <AListItem>
          <AListItemMeta :title="item.content" :description="item.time">
            <template #avatar>
              <SoybeanAvatar class="size-48px!" />
            </template>
          </AListItemMeta>
        </AListItem>
      </template>
    </AList>
  </ACard>
</template>

<style scoped></style>
